<template>
 
  <nav class="navbar fixed top-0 left-0 right-0 z-50 shadow-xl">
     
    <div class="max-w-7xl mx-auto px-6 py-4">
      <div class="flex items-center justify-between w-full">
        <!-- 品牌标识 -->
        <div class="flex items-center space-x-3 group">
          <div class="w-10 h-10 bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500 rounded-xl flex items-center justify-center shadow-lg group-hover:shadow-blue-500/25 transition-all duration-300 group-hover:scale-105">
            <svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 20 20">
              <path d="M10 12a2 2 0 100-4 2 2 0 000 4z"/>
              <path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"/>
            </svg>
          </div>
          <h1 class="text-2xl font-bold bg-gradient-to-r from-blue-400 via-purple-400 to-pink-400 bg-clip-text text-transparent group-hover:from-blue-300 group-hover:via-purple-300 group-hover:to-pink-300 transition-all duration-300">电影推荐系统</h1>
        </div>
        
        
        <!-- 导航菜单 -->
        <div class="hidden md:flex items-center space-x-2">
          <router-link to="/" class="nav-link group px-4 py-2 rounded-lg text-gray-300 hover:text-white hover:bg-white/10 font-medium transition-all duration-300 flex items-center relative overflow-hidden">
            <div class="absolute inset-0 bg-gradient-to-r from-blue-500/20 to-purple-500/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-lg"></div>
            <svg class="w-5 h-5 mr-2 relative z-10 group-hover:scale-110 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/>
            </svg>
            <span class="relative z-10">首页</span>
          </router-link>
          <router-link to="/movies" class="nav-link group px-4 py-2 rounded-lg text-gray-300 hover:text-white hover:bg-white/10 font-medium transition-all duration-300 flex items-center relative overflow-hidden">
            <div class="absolute inset-0 bg-gradient-to-r from-purple-500/20 to-pink-500/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-lg"></div>
            <svg class="w-5 h-5 mr-2 relative z-10 group-hover:scale-110 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 4v16M17 4v16M3 8h18M3 16h18"/>
            </svg>
            <span class="relative z-10">电影库</span>
          </router-link>
          <router-link to="/recommendations" class="nav-link group px-4 py-2 rounded-lg text-gray-300 hover:text-white hover:bg-white/10 font-medium transition-all duration-300 flex items-center relative overflow-hidden">
            <div class="absolute inset-0 bg-gradient-to-r from-pink-500/20 to-orange-500/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-lg"></div>
            <svg class="w-5 h-5 mr-2 relative z-10 group-hover:scale-110 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/>
            </svg>
            <span class="relative z-10">智能推荐</span>
          </router-link>
        </div>
      </div>
    </div>
    
    <!-- 用户区域（flex内右对齐） -->
    <div class="flex items-center space-x-4 ml-auto">
        <!-- 个人中心链接 -->
        <router-link to="/profile" class="hidden md:flex items-center px-3 py-2 rounded-lg text-gray-300 hover:text-white hover:bg-white/10 font-medium transition-all duration-300 group">
          <svg class="w-5 h-5 mr-2 group-hover:scale-110 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
          </svg>
          <span>个人中心</span>
        </router-link>
        
        <!-- 管理员入口链接 -->
        <router-link 
          v-if="authStore.user?.is_staff" 
          to="/admin" 
          class="hidden md:flex items-center px-3 py-2 rounded-lg text-gray-300 hover:text-white hover:bg-white/10 font-medium transition-all duration-300 group"
        >
          <svg class="w-5 h-5 mr-2 group-hover:scale-110 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/>
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
          </svg>
          <span>后台管理</span>
        </router-link>
        
        <!-- 用户下拉菜单 -->
        <div class="relative group">
          <button class="flex items-center space-x-2 px-4 py-2 rounded-xl bg-gradient-to-r from-gray-700/50 to-gray-600/50 hover:from-gray-600/60 hover:to-gray-500/60 border border-gray-500/30 hover:border-gray-400/50 transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-blue-500/50 group backdrop-blur-sm">
            <div class="w-8 h-8 bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500 rounded-full flex items-center justify-center text-white font-bold text-sm shadow-lg group-hover:shadow-blue-500/30 group-hover:scale-105 transition-all duration-300">
              {{ authStore.user?.username?.charAt(0).toUpperCase() }}
            </div>
            <div class="hidden sm:flex flex-col items-start">
              <span class="text-sm font-semibold text-gray-200 group-hover:text-white transition-colors duration-300">{{ authStore.user?.username }}</span>
              <span class="text-xs text-gray-400">在线</span>
            </div>
            <svg class="w-4 h-4 text-gray-400 group-hover:text-gray-200 transition-all duration-300 group-hover:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
            </svg>
          </button>
          
          <!-- 下拉菜单 -->
          <div class="absolute right-0 mt-3 w-72 bg-gray-800/95 backdrop-blur-xl rounded-2xl shadow-2xl border border-gray-600/40 opacity-0 invisible group-hover:opacity-100 group-hover:visible group-hover:translate-y-0 translate-y-2 transition-all duration-300 z-50">
            <!-- 用户信息头部 -->
            <div class="px-6 py-4 border-b border-gray-600/40">
              <div class="flex items-center space-x-3">
                <div class="w-12 h-12 bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500 rounded-full flex items-center justify-center text-white font-bold text-lg shadow-lg">
                  {{ authStore.user?.username?.charAt(0).toUpperCase() }}
                </div>
              </div>
            </div>
            
            <!-- 菜单项 -->
            <div class="py-2 absolute top-0 right-10000000000000000 z-50">
              <div class="border-t border-gray-600/40 my-2"></div>
              <!-- <button @click="handleLogout" class="w-full flex items-center px-5 py-3 text-sm text-red-400 hover:bg-red-500/10 hover:text-red-300 transition-all duration-300 group/item">
                退出登录
              </button> -->
            </div>
          </div>
        </div>
      </div>
  </nav>
</template>

<script setup lang="ts">
import { useAuthStore } from '@/stores/auth';
import { useRouter } from 'vue-router';

const authStore = useAuthStore();
const router = useRouter();

const handleLogout = () => {
  authStore.logout();
  router.push('/login');
};
</script>
